<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        .wei {
            display: flex;
            justify-content: space-between;
        }

        .wei .left {
            width: 200px;
            height: 570px;
            background-color: #353942;
            color: white;
            text-align: center;
        }

        .wei .left div {
            margin: 20px 0;
        }

        .wei .right {
            flex: 1;
            width: 200px;
            height: 570px;
            background-color: #eee;

        }

        .tubiao {
            display: flex;
            justify-content: space-around;
        }

        .xian,
        .zhu {
            width: 550px;
            height: 400px;
            border: 1px solid #eee;
            background-color: white;
        }

        .dd1 {
            display: flex;
            justify-content: space-between;
            height: 50px;
            line-height: 50px;
        }

        .dd1 .dd2 {
            font-size: 20px;
        }

        .right .hang {
            height: 60px;
            background-color: white;
        }

        img {
            width: 20%;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="wei">
        <div class="left">
            <div><img src="./03.gif" alt="">AdminLTE3</div>
            <div><img src="./06.gif" alt="">Alexander Pierce</div>
            <div>Dashboard</div>
            <div>widgets</div>
            <div class="active">Charts</div>
            <div>ulElements</div>
            <div>Forms</div>
            <div>Tables</div>
        </div>
        <div class="right">
            <div class="hang">
                <span>Home</span>
                <span>Contact</span>
                <input type="text" placeholder="Search">
            </div>
            <div class="dd1"><span class="dd2">Dashboard v3</span><span>Home / Dashboard v3</span></div>
            <div class="tubiao">
                <div class="xian"></div>
                <div class="zhu"></div>
            </div>

        </div>

    </div>


</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="mock.js"></script>
<script>
    var div = document.querySelectorAll('.wei .left div')
    for (let i = 0; i < div.length; i++) {
        div[i].onclick = function () {
            for (let j = 0; j < div.length; j++) {
                div[j].classList.remove('active')
            }
            div[i].classList.add('active')
        }
    }
    var xian = document.querySelector('.xian');
    var e = echarts.init(xian);
    e.setOption({
        title: {
            text: 'Visitors Over time',
        },
        legend: {
            bottom: 15,
            right: 10,

        },
        xAxis: {
            data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th']
        },
        yAxis: {
            min: 0,
            max: 200,
            splitNumber: 10
        },
        series: [
            {
                name: 'This Week',
                type: 'line',
                data: [100, 120, 170, 165, 184, 180, 160],
                symbolSize: 10,
                symbol: 'circle',
                smooth: true,
            },
            {
                name: 'Last Week',
                type: 'line',
                data: [60, 80, 70, 66, 80, 78, 100],
                symbolSize: 10,
                symbol: 'circle',
                smooth: true,
                itemStyle: {
                    normal: {
                        color: 'rgb(199, 198, 198)'
                    }
                }
            }

        ]
    });
    var zhu = document.querySelector('.zhu');
    var ec = echarts.init(zhu);
    ec.setOption({
        title: {
            text: 'Sales Over Time',
        },
        legend: {
            bottom: 15,
            right: 10
        },
        xAxis: {
            data: ['JUN', 'JUL', 'AUJ', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: {
             data: ['$0', '$1', '$2', '$3'],
            
            axisLabel: {
                formatter: '{value} k'
            }
        },
        series: [
            {
                name: 'This year',
                // barWidth: 15,
                type: 'bar',
                data: ['$1', '$2', '$3', '$2.5', '$2.8', '$2.5', '$3'],
            },
            {
                name: 'Last year',
                // barWidth: 15,
                type: 'bar',
                data: ['$0.8', '$1.8', '$2.8', '$2', '$1.8', '$1.5', '$2'],
                itemStyle: {
                    normal: {
                        color: 'rgb(199, 198, 198)'
                    }
                }
            }
        ]
    });
</script>